import React, { Component } from "react"
import { AdvancedTable, Space } from "components/index"
import { messages } from "share/common"
import { Button, Badge, Modal, message } from 'antd'
import httpFetch from "share/httpFetch"

class BankBatchDownload extends Component {

  componentWillReceiveProps(nextProps) {
    if (nextProps.tabKey === 'batch-download') {
      this.advancedTableRef.getList();
    }
  }

  state = {
    loading: {
      pdfLoading: [],
      downloadLoading: [],
      deleteLoading: []
    }
  };

  handleGetData = data => {
    data && data.map(item => {
      item.status !== 'P' && this.setBtnLoading(item.id, 'pdfLoading', false);
    })
  };

  renderDesc = () => {
    return (
      <section>
        <div>1、{messages('finance-4.key3')/*单个批次中回单数量过大易导致打印失败，因此系统默认：50条/批*/}</div>
        <div>
          <span>2、{messages('finance-4.key4')/*【生成PDF】等待时间可能较长,请*/}</span>
          <Button
            ghost
            type="link"
            onClick={() => this.advancedTableRef.getList()}
          >
            <span style={{textDecoration: 'underline'}}> {messages('finance-4.key5')/*刷新*/}</span>
          </Button>
          <span>{messages('finance-4.key6')/*查看【生成PDF】是否已完成，在生成PDF期间您仍然可进行其他页面的操作。*/}</span>
        </div>
      </section>
    );
  };

  getColumns = loading => {
    return [
      { title: messages('finance-4.key7')/*批次号*/, dataIndex: 'batchNo' },
      { title: messages('finance-4.key8')/*回单数量*/, dataIndex: 'receiptCount', width: 120 },
      { title: messages('finance-4.key9')/*创建人工号*/, dataIndex: 'operatorCode' },
      { title: messages('finance-4.key10')/*创建人姓名*/, dataIndex: 'operatorName' },
      {
        title: messages('common.column.status')/*状态*/, dataIndex: 'status', width: 120,
        render: value => {
          switch (value) {
            case 'N':
              return <Badge status="default" text={messages('finance-4.key11')/*未生成*/}/>;
            case 'P':
              return <Badge status="processing" text={messages('finance-4.key12')/*生成中*/}/>;
            case 'S':
              return <Badge status="success" text={messages('finance-4.key13')/*已生成*/}/>;
            case 'F':
              return <Badge status="error" text={messages('finance-4.key14')/*生成失败*/}/>;
          }
        }
      },
      {
        title: messages('common.operation')/*操作*/, dataIndex: 'id', width: 300,
        render: (value, record) => {
          return (
            <Space>
              <Button
                type="primary"
                disabled={record.status === 'P' || loading.pdfLoading.indexOf(record.id) > -1}
                onClick={() => this.generatePDF(record.id)}
              >
                {record.status === 'P' || loading.pdfLoading.indexOf(record.id) > -1
                  ? messages('finance-4.key12')/*生成中*/
                  : messages('finance-4.key15')/*生成PDF*/}
              </Button>
              <Button
                disabled={record.status !== 'S'}
                loading={loading.downloadLoading.indexOf(record.id) > -1}
                onClick={() => this.downloadBatch(record)}
              >
                {messages('finance-4.key16')/*下载*/}
              </Button>
              <Button
                loading={loading.deleteLoading.indexOf(record.id) > -1}
                disabled={record.status === 'P'}
                onClick={() => {
                  Modal.confirm({
                    title: messages('finance-4.key17')/*确认删除？*/,
                    content: messages('finance-4.key18')/*删除批次内的借款单可重新生成批次！*/,
                    onOk: () => this.handleDeleteBatch(record.id),
                  })
                }}>
                {messages('common.delete')/*删除*/}
              </Button>
            </Space>
          )
        }
      }
    ]
  };

  generatePDF = id => {
    this.setBtnLoading(id, 'pdfLoading', true);
    httpFetch.get(`/payment/api/receipt/createReceiptBatchPdf?id=${id}`).then(() => {
      this.advancedTableRef.getList();
    }).catch(() => {
      this.setBtnLoading(id, 'pdfLoading', false)
    })
  };

  downloadBatch = record => {
    window.open(record.pdfUrl)
  };

  handleDeleteBatch = id => {
    this.setBtnLoading(id, 'deleteLoading', true);
    httpFetch.delete(`/payment/api/receipt/deleteReceiptBatch?id=${id}`).then(() => {
      message.success(messages('common.delete.success',{arg1: ""})/*{arg1} 删除成功*/);
      this.setBtnLoading(id, 'deleteLoading', false);
      this.advancedTableRef.getList();
    }).catch(() => {
      this.setBtnLoading(id, 'deleteLoading', false)
    })
  };

  setBtnLoading = (id, type, isLoading) => {
    const { loading } = this.state;
    loading[type][isLoading ? 'push' : 'delete'](id);
    this.setState({ loading });
  };

  service = (page, size) => {
    return httpFetch.post(`/payment/api/receipt/batch/findPage`, {page, size})
  };

  render() {
    const { loading } = this.state;
    return (
      <AdvancedTable.SimpleTable
        index
        onRef={ref => this.advancedTableRef = ref}
        service={this.service}
        rowKey="id"
        columns={this.getColumns(loading)}
        onGetData={this.handleGetData}
      >
        <div style={{display: 'flex', margin: '0 16px'}}>
          <div>
            {messages('finance-4.key19')/*说明*/}：
          </div>
          <div>
            {this.renderDesc()}
          </div>
        </div>
      </AdvancedTable.SimpleTable>
    )
  }

}

export default BankBatchDownload
